<template>
  <div style="background:#F2f2f2;font-size:14px;color:#444">
    <v-toolbar dark style="background:#2fc687">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="white--text">知源首页</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
      <v-icon>search</v-icon>
      </v-btn>
      <v-btn icon>
      <v-icon>apps</v-icon>
      </v-btn>
      <v-btn icon>
      <v-icon>refresh</v-icon>
      </v-btn>
      <v-btn icon>
      <v-icon>more_vert</v-icon>
      </v-btn>
    </v-toolbar>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs3 style="max-width:262px;">
         <div class="left-container">
           <img class="logo" src="./../assets/logo.png" alt="">
           <p>四苹果（北京）农业科技有限公司</p>
           <p>产品数量 :12</p>
           <p>可用验证码 :5000</p>
           <p>已用验证码 :2000</p>
         </div>
         <br/>
         <div class="left-nav-item" :class="{'left-nav-item-active':select == i.name}" v-for="i in vNav" :key="i.name" @click="select=i.name;$router.push({name:i.routeName})">
          <template v-if="i.main">
            <div style="max-width:130px;margin:auto" >
              <span style="display:block;text-align:left;" v-text="i.name"></span>
            </div>
          </template>
          <template v-else>
            <div style="max-width:150px;margin:auto">
              <span style="padding-left:20px;display:block"> <v-icon>{{i.icon}}</v-icon> &nbsp;&nbsp;{{i.name}}</span>
            </div>
          </template>
         </div>
        </v-flex>
        <v-flex xs9 style="border:0px solid blue">
         <router-view></router-view>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      select: '扫描统计',
      vNav: [
        {
          name: '扫描统计',
          main: true,
          allowSelect: true,
          routeName: 'center'
        },
        {
          name: '档案管理',
          main: true,
          allowSelect: false,
          routeName: 'doc'
        },
        {
          name: '企业管理',
          main: true,
          allowSelect: false,
          routeName: 'exp'
        },
        {
          name: '企业信息',
          main: false,
          allowSelect: true,
          icon: 'account_balance',
          routeName: 'expinfo'
        },
        {
          name: '人员管理',
          main: false,
          allowSelect: true,
          icon: 'account_circle',
          routeName: 'expperson'
        },
        {
          name: '权限管理',
          main: false,
          allowSelect: true,
          icon: 'lock',
          routeName: 'expauth'
        },
        {
          name: '消息',
          main: true,
          allowSelect: true,
          routeName: 'message'
        },
        {
          name: '设置',
          main: true,
          allowSelect: true,
          routeName: 'setting'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  max-width:none
}
.left-container{
  padding: 20px;
  text-align: center;
  background: #EBEBEB;
  border-radius: 5px;
}
.logo{
  width: 80px;
  height: 80px;
  border-radius: 80px;
  padding: 5px;
  background: #fff;
}
.left-nav-item{
   padding: 15px;
   cursor: pointer;
}
.left-nav-item-active{
  background: #EBEBEB;
  border-radius: 5px;
  color:#2fc687;
}
</style>
